<!--
 * @Description: 
 * @Author: qingyang
 * @Date: 2022-12-23 13:35:24
 * @LastEditors: qingyang
 * @LastEditTime: 2023-01-10 16:27:33
-->

<template>
  <CDrawer v-model="dialogVisible" :title="info.factorName" :tips="info.enName || '-'">
    <div class="detail-container" v-loading="loading">
      <CDetailCellGroup title="基本信息" class="g-mt8" :hasDivider="false">
        <CDetailCellItem label="类别">{{
          FactorCategoryMap[info.category] || '-'
        }}</CDetailCellItem>
        <CDetailCellItem label="国别">{{ empty(info.country) }}</CDetailCellItem>
        <CDetailCellItem label="碳排放因子"
          >{{ empty(info.emissionFactor) }} {{ info.factorUnit }}</CDetailCellItem
        >
        <CDetailCellItem label="因子来源">{{ FactorSourceMap[info.factorSource] }}</CDetailCellItem>
        <CDetailCellItem label="基准年">{{ empty(info.baseYear) }}</CDetailCellItem>
        <CDetailCellItem label="标签">{{ empty(info.tag) }}</CDetailCellItem>
        <CDetailCellItem label="备注">{{ empty(info.comment) }}</CDetailCellItem>
        <CDetailCellItem label="附件">
          <div class="g-flex-start-center">
            <img v-if="info.attachment" src="@/assets/images/icon_file.png" class="icon-file" />
            <GTooltip :content="info.attachmentName" class="g-flex">
              <div
                class="g-ell inner-file"
                style="max-width: 210px"
                @click="handleDownload(info.attachment)"
                >{{ empty(info.attachmentName) }}</div
              >
            </GTooltip>
          </div></CDetailCellItem
        >
      </CDetailCellGroup>
    </div>
  </CDrawer>
</template>
<script lang="ts">
export default {
  name: 'FactorDetail'
};
</script>
<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed, watch, ref } from 'vue';
import { GTooltip } from '@/components/GTooltip/index';
import { queryFactorDetail } from '@/apis/system/config/audit';
import { IFactorDetail } from '@/apis/system/config/model/auditModel';
import { empty } from '@/utils';
import { CDrawer } from '@/components/CDrawer/index';
import { FactorCategoryMap, FactorSourceMap } from '@/constants/enum';
import { CDetailCellGroup, CDetailCellItem } from '@/components/CDetailGroup';

interface SelectFillTypeDialogProps {
  visible: boolean;
  factorNo: string;
}
const props = withDefaults(defineProps<SelectFillTypeDialogProps>(), {});
const emit = defineEmits(['update:visible', 'audit']);
const info = ref({} as IFactorDetail);
const loading = ref(false);
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
watch(
  () => dialogVisible.value,
  val => {
    if (val) {
      loadData();
    }
  }
);
const loadData = async () => {
  loading.value = true;
  try {
    let data = await queryFactorDetail(props.factorNo);
    info.value = data ?? {};
  } finally {
    loading.value = false;
  }
};
const handleDownload = (url: string) => {
  url && window.open(url);
};
</script>
<style lang="scss" scoped>
.detail-container {
  position: relative;
  height: 100%;
  :deep(.item-label) {
    width: 108px;
  }
  .icon-file {
    margin-right: 6px;
    width: 16px;
    height: 16px;
  }
  .inner-des {
    font-size: 14px;
    color: #51596c;
    line-height: 22px;
    margin: 9px 0 9px;
    flex: 1;
  }
  .inner-file {
    font-size: 14px;
    color: #51596c;
    line-height: 22px;
    // margin: 9px 0 9px;
    cursor: pointer;
    &:hover {
      color: $themeColor;
    }
  }
}
</style>
